<script setup lang="ts">
defineOptions({
  name: 'ProPage',
})

withDefaults(defineProps<{
  title?: string
  description?: string
  plain?: boolean
  multiCard?: boolean
  flexTable?: boolean
  hideFooter?: boolean
}>(), {
  title: undefined,
  description: undefined,
  // 朴素页面，是否为单纯的容器
  plain: false,
  // 内容是否为多个卡片
  multiCard: false,
  // 页面表格铺满，超出则表格滚动，否则整体页面滚动
  flexTable: false,
  // 是否关闭页脚
  hideFooter: false,
})

const slots = useSlots()
</script>

<template>
  <div
    class="pro-page"
    :class="[
      { plain },
      { 'multi-card': multiCard },
      { 'flex-table': flexTable },
      { 'hide-footer': hideFooter },
    ]"
  >
    <slot v-if="plain" />

    <a-card v-else-if="!multiCard" class="page-card" :bordered="false" style="height: 100%">
      <template #title>
        <PageTitle v-if="title || description" :title="title" :description="description">
          <template #right>
            <slot name="title-right" />
          </template>
        </PageTitle>
        <!-- <a-divider v-if="title || description" style="margin: 0" /> -->
      </template>
      <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
        <slot :key="key" :name="key" v-bind="scoped" />
      </template>
    </a-card>

    <a-card v-else :bordered="false">
      <template #title>
        <PageTitle v-if="title || description" :title="title" :description="description" />
      </template>
      <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
        <slot :key="key" :name="key" v-bind="scoped" />
      </template>
    </a-card>
  </div>
</template>

<style lang="less" scoped>
.pro-page {
  flex: 1;
  padding: @padding;
}
</style>
